<template>
  <div>
    <a-spin :spinning="spinning">
      <a-row :gutter="[0, 24]">
        <a-col :span="24">
          <LinkOutlined />
          链接邀请加入团队
        </a-col>
        <a-col :span="24">
          <a-input-group compact size="large">
            <a-input
              v-model:value="inviteLink"
              style="width: 85%"
              size="large"
              disabled
            >
              <template #suffix>
                <a-tooltip title="重置链接">
                  <ReloadOutlined
                    style="color: rgba(0, 0, 0, 0.45)"
                    @click="() => (resetModalVisible = true)"
                  />
                </a-tooltip>
              </template>
            </a-input>
            <a-button
              ref="copyBtnRef"
              type="primary"
              style="width: 15%"
              class="copy_btn"
            >
              复制链接
            </a-button>
          </a-input-group>
          <div class="tip">邀请将在 3 天后过期</div>
        </a-col>
      </a-row>
      <a-modal
        v-model:open="resetModalVisible"
        title="重置链接"
        :body-style="{
          padding: '24px 0',
        }"
        :mask-style="{ backgroundColor: 'rgba(255,255,255,0.7)' }"
        :maskClosable="false"
        centered
      >
        重置链接后，协作伙伴将无法再次通过旧链接加入团队。确认重置链接吗？
        <template #footer>
          <a-button key="back" @click="() => (resetModalVisible = false)">
            取消
          </a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="resetLoading"
            @click="resetInviteUrl"
          >
            确定
          </a-button>
        </template>
      </a-modal>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { LinkOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { useTeamStore } from '@/store';
import { message } from 'ant-design-vue';
import Clipboard from 'clipboard'

const teamStore = useTeamStore();
const { getTeamInviteUrl, resetTeamInviteUrl } = teamStore;
const inviteLink = ref('');
const resetModalVisible = ref(false);
const resetLoading = ref(false);
const copyLoading = ref(false);
const spinning = ref(true);
const copyBtnRef = ref(null);

onMounted(async () => {
  await getInviteUrl();
  spinning.value = false;
});
// 获取邀请链接
async function getInviteUrl() {
  const res = await getTeamInviteUrl();
  inviteLink.value = res.data;
}
// 重置邀请链接
async function resetInviteUrl() {
  resetLoading.value = true;
  await resetTeamInviteUrl();
  resetLoading.value = false;
  resetModalVisible.value = false;
  await getInviteUrl();
  message.success('重置链接成功');
}

// 复制链接
const clipboard = new Clipboard('.copy_btn', {
  text: function () {
    return `「${teamStore.teamOwner}」邀请你加入团队「${teamStore.teamName}」\n${inviteLink.value}`;
  },
});
clipboard.on('success', () => {
  copyLoading.value = false;
  message.success('复制链接成功');
});
clipboard.on('error', () => {
  copyLoading.value = false;
  message.error('复制链接失败');
});

onBeforeUnmount(() => {
  // 销毁内存
  clipboard.destroy();
});
</script>

<style scoped lang="scss">
.tip {
  color: rgba(0, 0, 0, 0.45);
  margin: 10px 0;
}
</style>
